/**
 * Created by chenchun on 2017/2/24.
 */
// JavaScript Document

(function($) {
	var ColorHex 		= ['00','33','66','99','CC','FF'];
    var SpColorHex 		= ['FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF'];
	
    $.fn.color = function(options, param) {
        if (typeof options == "string") {
            return $.fn.color.methods[options](this, param);
        }
        options = options || {};
        return this.each(function(){
            var data = $.data( this, "color" );
			if (data) {
				opts = $.extend(data.options, options);
			} else {
				opts = $.extend( {}, $.fn.color.defaults,$.fn.color.parseOptions( this ), options);
				data = $.data( this, "color", {options : opts});
			}
        });
    };

    /**
     * 默认值配置
     */
    $.fn.color.defaults = {//默认属性定义
		SelectedValue : false,
		onColor : function(rgb){}
    }

    /**
     * 对外暴露的方法
     */
    $.fn.color.methods = {
        show : function (jq) {
            return jq.each(function(){
                openColor.call(this);
            });
        },
		value : function(jq) {
			var data = $.data( this, "color" );
			if( data ){
				return data.options.SelectedValue;
			}
			return false;
		}
    };

    /**
     * class声明式定义属性data-options转化为options
     * @param {Object} target DOM对象
     * @return {TypeName}
     */
    $.fn.color.parseOptions = function(target) {
        return {};
    };
	
	
	function openColor(){
		var colorTable=''
		for (i=0;i<2;i++) {
			for (j=0;j<6;j++) {
				colorTable=colorTable+'<tr height=15>';
				colorTable=colorTable+'<td width=15 style="background-color:#000000">';
				if (i==0){
					colorTable=colorTable+'<td name="color" width=15 style="cursor:pointer;background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'">'
				}else{
					colorTable=colorTable+'<td name="color" width=15 style="cursor:pointer;background-color:#'+SpColorHex[j]+'">'
				}
				colorTable=colorTable+'<td width=15 style="background-color:#000000">';
				for (k=0;k<3;k++) {
					for (l=0;l<6;l++) {
						colorTable=colorTable+'<td name="color" width=15 style="cursor:pointer;background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'">'
					}
				}
			}
		}
		colorTable='<div style="position:absolute;z-index:99999;"><table border="0" cellspacing="0" cellpadding="0" style=" border:1px #000000 solid;border-bottom:none;border-collapse: collapse;width:316px;" bordercolor="000000">'
			+'<tr height=20><td colspan=21 bgcolor=#ffffff style="font:12px tahoma;padding-left:2px;">'
			+'<span style="float:right;padding-right:3px;cursor:pointer;">×关闭</span>'
			+'</td></table>'
			+'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:pointer;">'
			+colorTable+'</table></div>';
			var color = $( colorTable );
			$("body").append(color);
			var _this 	= this;
			var data 	= $.data( this, "color" );
			var pos  	= $(this).position();
			color.css({top:pos.top, left:pos.left});
			color.find("span").bind("click" ,function(){
				color.remove();
			});
			color.find("td[name=color]").bind("click" ,function(e){
				var rgb = $(this).css('background-color');
				$(_this).css({"background-color":rgb});
				data.options.onColor.call(_this ,rgb);
				color.remove();
			});
			
		//document.getElementById("colorpane").innerHTML=colorTable;
		//var current_x = document.getElementById("inputcolor").offsetLeft;
		//var current_y = document.getElementById("inputcolor").offsetTop;
		//document.getElementById("colorpane").style.left = current_x + "px";
    	//document.getElementById("colorpane").style.top = current_y + "px";
	}

  
})(jQuery);

